/**
 * @author hanzhichen
 * @date 2021-01-30
 * 横向table, 实现上目前使用antd的grid布局, 横向List最终也是使用grid布局...
 * 样式上还有有不少问题, 目前不知道应该如何调整
 */

/* eslint-disable react/no-array-index-key */
import React from 'react';
import {List, Row, Col, Typography} from 'antd';

const {Paragraph} = Typography;
const HorizonTable = props => {
    const {
        columns = [],
        dataSource = [],
        // 外部用来覆盖内部样式的手段, 先只考虑style属性吧...
        rowStyle = {},
        colStyle = {},
        cellStyle = {}
    } = props;

    return (
        <Row
            style={{
                border: '1px solid #ddd',
                borderLeft: 'none',
                borderTop: 'none',
                ...rowStyle
            }}
        >
            {Array.isArray(dataSource) &&
                dataSource.map((dataItem, dataIdx) => (
                    <Col key={dataIdx} flex="1 0 auto" style={{colStyle}}>
                        {Array.isArray(dataSource) &&
                            columns.map((colItem, colIndex) => (
                                <Paragraph
                                    key={colIndex}
                                    style={{
                                        minWidth: 'max-content',
                                        marginBottom: '0',
                                        height: '2.5em',
                                        lineHeight: '2.5em',
                                        textAlign: 'center',
                                        border: '1px solid #ddd',
                                        borderRight: 'none',
                                        borderBottom: 'none',
                                        ...cellStyle
                                    }}
                                >
                                    {dataItem?.[colItem?.dataIndex] === ''
                                        ? '-'
                                        : dataItem?.[colItem?.dataIndex] ?? '-'}
                                </Paragraph>
                            ))}
                    </Col>
                ))}
        </Row>
    );
};

export default HorizonTable;
